<script setup lang="ts">
import { ref } from 'vue'

import { mobileRules, passwordRules, codeRules } from '@/utils/rules'

import login from './composable/login'

import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores'

const route = useRoute()
const router = useRouter()
const { setReturnUrl } = useUserStore()

const canSubmit = ref(false)
const isCode = ref(false)

const showPassword = ref(false)

function onChangeLoginType() {
  isCode.value = !isCode.value
}

const { time, loginFormRef, mobile, password, code, getCode, onUserLogin } =
  login(() => {
    router.replace({
      path: (route.query.returnUrl as string | undefined) || '/user'
    })
  })

const qqUrl = `https://graph.qq.com/oauth2.0/authorize?client_id=102015968&response_type=token&scope=all&redirect_uri=${encodeURIComponent(
  import.meta.env.VITE_APP_CALLBACK + '/login/callback'
)}`
</script>

<template>
  <div class="login-page">
    <cp-nav-bar
      right-text="注册"
      @click-right="$router.push('/register')"
    ></cp-nav-bar>
    <!-- 头部 -->
    <div class="login-head">
      <h3>{{ isCode ? '短信验证码登录' : '密码登录' }}</h3>
      <a href="javascript:;" @click="onChangeLoginType">
        <span>{{ !isCode ? '短信验证码登录' : '密码登录' }}</span>
        <van-icon name="arrow"></van-icon>
      </a>
    </div>
    <!-- 表单 -->
    <van-form
      ref="loginFormRef"
      autocomplete="off"
      :validate-trigger="['onBlur', 'onChange']"
      @submit="(form) => onUserLogin(isCode ? 'codeLogin' : 'passLogin', form)"
    >
      <van-field
        name="mobile"
        v-model="mobile"
        :rules="mobileRules"
        placeholder="请输入手机号"
        type="tel"
      ></van-field>
      <van-field
        v-if="!isCode"
        name="password"
        v-model="password"
        :rules="passwordRules"
        placeholder="请输入密码"
        :type="showPassword ? 'text' : 'password'"
      >
        <template #button>
          <cp-icon
            :name="showPassword ? 'login-eye-on' : 'login-eye-off'"
            @click="showPassword = !showPassword"
          >
          </cp-icon>
        </template>
      </van-field>
      <van-field
        name="code"
        v-model="code"
        :rules="codeRules"
        v-else
        placeholder="短信验证码"
      >
        <template #button>
          <span class="btn-send" :class="{ active: !time }" @click="getCode">{{
            time ? `${time}s后再次发送` : '发送验证码'
          }}</span>
        </template>
      </van-field>
      <div class="cp-cell">
        <van-checkbox v-model:model-value="canSubmit">
          <span>我已同意</span>
          <a href="javascript:;">用户协议</a>
          <span>及</span>
          <a href="javascript:;">隐私条款</a>
        </van-checkbox>
      </div>
      <div class="cp-cell">
        <van-button
          block
          round
          type="primary"
          :disabled="!canSubmit"
          native-type="submit"
        >
          登 录
        </van-button>
      </div>
      <div class="cp-cell">
        <a href="javascript:;">忘记密码？</a>
      </div>
    </van-form>
    <!-- 底部 -->

    <div class="login-other">
      <van-divider>第三方登录</van-divider>
      <div
        class="icon"
        @click="
          () => setReturnUrl($route.query.returnUrl as string | undefined)
        "
      >
        <a :href="qqUrl">
          <img src="@/assets/qq.svg" alt="" />
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/login.scss';
</style>
